<template>
  <el-container>
    <el-header>
      <navbar />
    </el-header>
    <el-main>
      <div class="my-store">
        <div class="store-cont">
          <div class="add-title text-center">创建我的店铺</div>
          <ele-form
            ref="form"
            v-model="formData"
            v-bind="formConfig"
            :request-fn="handleRequest"
            @request-success="handleRequestSuccess"
          />
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import store from '@projectName/store'
import router from '@projectName/router'
import {
  addonscreateItem,
  getStoreLabel,
  getCategory
} from '@projectName/api/store.js'
import { getCitylist } from '@projectName/api/system.js'
import { mapGetters } from 'vuex'
import Navbar from '@projectName/layout/components/Navbar'
export default {
  components: {
    Navbar
  },
  data() {
    return {
      // 表单数据 start
      formData: {
        mid: 0,
        bloc_id: 0
      },
      formConfig: {
        formDesc: {
          name: {
            type: 'input',
            label: '商户名称'
          },
          provinceCityDistrict: {
            type: 'cascader',
            label: '所在地区',
            isOptions: true,
            options: getCitylist().then((res) => {
              console.log('城市列表', res)
              return res.data
            })
          },
          category: {
            type: 'cascader',
            label: '商户分类',
            isOptions: true,
            options: getCategory().then((res) => {
              console.log('商户分类', res.data)
              return res.data
            })
          },
          address: {
            type: 'bmap',
            label: '具体地址',
            valueFormatter(val) {
              console.log(val)
              // 最终提交时
              return val && val.address ? val.address : null
            },
            vif: (data) => data.provinceCityDistrict,
            // 这里必须制定 optionsLinkageFields 做为关联字段，当字段值发生变化时，会重新出发请求
            optionsLinkageFields: ['provinceCityDistrict'],
            attrs: (data) => {
              // 动态设置地图中心
              if (data.provinceCityDistrict && !data.address) {
                return {
                  zoom: 19,
                  center:
                    this.$refs[
                      'form'
                    ].$refs.provinceCityDistrict[0].$refs.cascader.getCheckedNodes()[0]
                      .label
                }
              } else {
                return {
                  zoom: 19
                }
              }
            },
            displayFormatter: (address) => {
              console.log('address', address, typeof address)
              // 设置显示的值
              if (typeof address !== 'undefined') {
                this.formData.latitude = address.lat
                this.formData.longitude = address.lng
                return address
              }
            },
            props: {
              showAddressBar: true,
              autoLocation: true
            }
          },
          longitude: {
            type: 'input',
            label: '经度',
            attrs: {
              disabled: true
            }
          },
          latitude: {
            type: 'input',
            label: '维度',
            attrs: {
              disabled: true
            }
          },
          mobile: {
            type: 'input',
            label: '联系电话'
          },
          // status: {
          //   type: "radio",
          //   label: "审核状态",
          //   isOptions: true,
          //   options: getStorestatus().then((res) => {
          //     console.log("审核状态", res);
          //     return res.data;
          //   }),
          //   default: 1,
          // },
          logo: {
            label: '商户LOGO',
            type: 'image-uploader' // 只需要在这里指定为 image-uploader 即可
          },
          label_link: {
            type: 'checkbox',
            label: '商户标签',
            isOptions: true,
            options: getStoreLabel().then((res) => {
              return res.data
            })
          }
        },
        order: [
          'name',
          'provinceCityDistrict',
          'category',
          'address',
          'longitude',
          'latitude',
          'mobile',
          'logo'
        ]
      }
      // 表单数据 end
    }
  },
  computed: {
    ...mapGetters([
      'userInfo', 'accessToken'
    ])
  },
  created() {
    console.log('userInfo', this.userInfo)
    this.formData.bloc_id = this.userInfo.userInfo.bloc_id
    this.formData.mid = this.$route.query.mid
  },
  methods: {
    handleRequest(data) {
      const that = this
      console.log('handleRequest', data.provinceCityDistrict)
      if (!data.provinceCityDistrict) {
        that.$message.error('请选择省市区')
        return false
      }
      if (!data.category) {
        that.$message.error('请选择商户分类')
        return false
      }
      data.province = data.provinceCityDistrict[0]
      data.city = data.provinceCityDistrict[1]
      data.county = data.provinceCityDistrict[2]

      data.category_id = data.category[0]
      data.category_pid = data.category[1]

      addonscreateItem(data).then(async(response) => {
        if (response.code === 200) {
          // that.$message.success(response.message);
          const accessRoutes = await store.dispatch('permission/getMenus', that.accessToken)
          // dynamically add accessible routes
          router.addRoutes(accessRoutes)
          this.$message.success('创建成功')
          this.$router.push({ path: '/system-store-index' })
        } else {
          this.$message.error(response.message)
        }
      })
      return Promise.resolve()
    },
    handleRequestSuccess(res) {

    }
  }
}
</script>

<style lang="scss" scoped>
.el-main {
  height: calc(100vh - 60px);
}
.my-store {
  padding-bottom: 100px;
  .store-cont {
    margin: 0 auto;
    background: #fff;
    .add-title {
      font-size: 18px;
      margin-bottom: 50px;
      font-weight: bold;
    }
  }
}
::v-deep .el-button {
  width: 222px;
  height: 38px;
}
</style>
